<template>
  <div>
    <el-button
      type="button"
      icon="el-icon-plus"
      @click="dialogFormVisible = true"
      >增加文章</el-button
    >
    <!-- 查询用户列表 -->
    <el-table
      :data="chapters"
      border
      size="mini"
      align="center"
      header-align="center"
    >
      <el-table-column align="center" prop="id" label="ID"> </el-table-column>
      <el-table-column align="center" prop="title" label="标题">
      </el-table-column>
      <el-table-column align="center" prop="content" label="内容">
      </el-table-column>
      <el-table-column align="center" prop="username" label="发帖人">
      </el-table-column>
      <el-table-column align="center" prop="usercode" label="发帖账号" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        :current-page="pages.current"
        :total="pages.total"
        :page-size="pages.maxLimit"
        :current-change="pageChange"
        background
        layout="prev, pager, next"
      ></el-pagination>
    </div>

    <!-- 增加弹出框 -->
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="showForm" size="mini">
        <el-form-item label-width="80px" label="标题">
          <el-input v-model="showForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label-width="80px" label="文章内容">
          <el-input v-model="showForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '组件路径'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  // 父子组件传递数据的中间容器
  props: {},
  // 这里存放数据
  data() {
    return {
      showForm: {
        title: "",
        content: "",
      },
      dialogFormVisible: false,
      chapters: [],
      pages: {
        current: 1,
        maxLimit: 10,
        total: 0,
      },
    };
  },
  // 计算树形 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
      let id = row.id;
      // let idList = [];
      // idList.push(row.id);
      this.$confirm(`确定删除文章  ${row.title} ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.chapter.batchDelete(id).then((data) => {
          console.log(data);
          this.getChapters();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    getChapters() {
      console.log(this.$api);
      this.$api.chapter.findPage(this.pages).then((data) => {
        this.chapters = data.data.records;
      });
    },
    submitData() {
      console.log(this.showForm);
      this.$api.chapter.save(this.showForm).then((data) => {
        console.log(data);
        this.getChapters();
        this.dialogFormVisible = false;
      });
    },
    pageChange() {
      this.getChapters();
    },
  },
  // 声明周期 - 创建完成（可以访问当前this实例）
  created() {
      this.getChapters()
  },
  // 声明周期 - 挂载完成（可以访问dom元素）
  mounted() {},
  // 声明周期 - 创建之前
  beforeCreate() {},
  // 声明周期 - 挂载之前
  beforeMount() {},
  // 声明周期 - 更新之前
  beforeUpdate() {},
  // 声明周期 - 更新之后
  updated() {},
  // 声明周期 - 销毁之前
  beforeDestroy() {},
  // 声明周期 - 销毁完成
  destroyed() {},
  // 如果页面由keep-alive缓存功能，这个函数会被触发
  activated() {},
};
</script>
<style scoped>
</style>
